body {

  background: url(../images/bg.jpg) no-repeat left top / cover;
}

.container {
  max-width: 1920px;
  min-width: 1280px;
  min-height: 700px;
  background: url(../images/logo.png) no-repeat left top / contain;
  margin: 0 auto;
  display: flex;
  padding: 88px 20px 20px 20px;
}

.container .column {

  flex:3;
}
.container .column:nth-child(2) {

  flex:4;
  margin: 0 20px;
}

.panel {

  border: 1px solid black;
  border-width: 51px 41px 25px 128px;
  border-image: url(../images/border.png) 51 41 25 128;
  position: relative;
}

.inner {

  position: absolute;
  left: -128px;
  top: -51px;
  right: -41px;
  bottom: -25px;
  padding: 20px;
}

.overview {
  height: 110px;
}
.monitor {
  height: 474px;
  margin: 20px 0;
}

.point-user {
  height: 330px;
}


.map {
  color:white;
  margin-bottom:20px;
}
.map h3{
  
  font-size:24px;
  font-weight: normal;
  height: 56px;
  line-height: 56px;
}
.map h3 i{
  
  color: #68d8fe;
  margin-right: 10px;
}

.map .echarts {

  height: 547px;
  background-color: rgba(255,255,255,.3);
}

.order {
  height: 144px;
}

.sales {
  height: 244px;
  margin: 20px 0;
}


.chan-pro>div {
  height: 230px;
  width: 48%;
}

.hot {
  height: 276px;
  margin-top: 20px;
}


.overview .inner {

  display: flex;
  align-items: center;
}

.overview .item {

  flex:1;
  color:white;
  text-align: center;
}
.overview .item p{

 font-size: 22px;
 margin-bottom: 10px;
}

.overview .item span{

 color:#006cff;
}


.overview .item:nth-child(n+2) span i{

 color:#6acca3;
}

.overview .item:nth-child(4) span i{

 color:#ed3f35;
}


.monitor .tabs{

  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
}

.monitor .tabs a.active{
  color:white;
}
.monitor .tabs a{

  color: #1250c4;
  font-size: 22px;
}

.monitor .tabs span{

  color:#00f2f1;
  font-size: 22px;
}

.monitor .title {

  height: 38px;
  display: flex;
  color: #5bb9dc;
  align-items:center;
  background-color: rgba(255,255,255, .1);
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.monitor .title span{
  flex:3;
}
.monitor .title span:nth-child(2){
  flex:6;
}


.monitor .carousel {
  height: 350px;
  overflow: hidden;
  margin-left: -20px;
  margin-right: -20px;
}

.monitor .content.active {
  display: block;
}
.monitor .content {
  display: none;
}


.monitor .carousel li:hover{

  background-color: green;
}
.monitor .carousel li{
  height: 35px;
  color: #2484c4;
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.monitor .carousel li span{
  flex:3;
}
.monitor .carousel li span:nth-child(2){
  flex:6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.point-user {

  color:white;
}

.point-user h3 {
  font-size: 22px;
  font-weight: normal;
}

.point-user .detail {

  height: 240px;
  display: flex;
  margin-top: 15px;
}

.point-user .detail .echarts{
  flex:4.5;
  background-color: rgba(255,255,255,.3);
}
.point-user .detail .data{
  flex:2;
  background: url(../images/rect.png) no-repeat left top / cover;
}


.point-user .detail .data .item{ 
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.point-user .detail .data .item p{ 
  font-size: 22px;
  margin-bottom: 10px;
}


.point-user .detail .data .item span{ 
  color:#3a83dd;
}


.point-user .detail .data .item span i{ 
  color:#ed3f35;
}


.point-user .detail .data .item:nth-child(2) span i{ 
  color:#eacf19;
}